<template>
  <div class="sidebar">
    <div class="login-pic">
      <img
        src="http://www-wms-java.itheima.net/img/title.ef005a7a.png"
        alt=""
      />
    </div>
    <div style="margin-top: 40px">
      <el-col :span="24">
        <el-menu
          default-active="/dashboard"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#fff"
          text-color="rgb(136, 126, 126)"
          active-text-color="#332929"
          :router="true"
        >
          <el-menu-item index="/dashboard">
            <i class="el-icon-menu"></i>
            <span slot="title">工作台</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span>基础信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/storescontrol">仓库管理</el-menu-item>
              <el-menu-item index="/reservoirarea">库区管理</el-menu-item>
              <el-menu-item index="/storagelocation">库位管理</el-menu-item>
              <el-menu-item index="/libraryview">库位视图 </el-menu-item>
              <el-menu-item index="/kindsgoods">货品管理</el-menu-item>
              <el-menu-item index="/goodstype">货品类型管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-shopping-bag-1"></i>
              <span>商务管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">货主管理</el-menu-item>
              <el-menu-item index="3-2">承运商管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-house"></i>
              <span>库内管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">盘点单</el-menu-item>
              <el-menu-item index="4-2">盘点任务</el-menu-item>
              <el-menu-item index="4-3">库存损益</el-menu-item>
              <el-menu-item index="4-4">实时库存</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-s-fold"></i>
              <span>入库管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="5-1">入库单</el-menu-item>
              <el-menu-item index="5-2">收货任务</el-menu-item>
              <el-menu-item index="5-3">上架任务</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-unfold"></i>
              <span>出库管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="6-1">出库单</el-menu-item>
              <el-menu-item index="6-2">拣货任务</el-menu-item>
              <el-menu-item index="-2">交接任务</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </div>
    <div class="fotter">
      <img
        style="width: 36px; height: 36px"
        src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
        alt=""
      />
      <p style="margin-left: 20px">admin</p>
      <p style="margin-left: 20px;color:#ccc">|</p>
      <el-button icon="el-icon-s-unfold" style="border:0;width:30px;height:30px;background: #FDFAFA;color:#ccc;margin-top:2px" @click="login"></el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SideBar',
  methods: {
    login () {
      this.$router.push('/login')
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  position: fixed;
  width: 226px;
  height: 100%;
  //   height: 600px;
  // background-color: skyblue;
  background: #fff;
  box-shadow: 2px 0 6px 0 rgb(144 142 142 / 13%);
}
.login-pic {
  width: 150px;
  height: 64px;
}
.login-pic img {
  padding-left: 20px;
  padding-top: 20px;
  width: 150px;
  height: 64px;
}
.fotter {
  display: flex;
  padding-left: 15px;
  padding-top: 30px;
  width: 206px;
  height: 70px;
  border-top: 1px solid #ccc;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>
